import Taro, { Component, Config } from '@tarojs/taro'
import { Image, Text, View, ScrollView } from '@tarojs/components'
import './index.scss'
import { getGisciplePage, getGiscipleDetailPage } from '@/api/userApi'
import { formatTime, formatAmount, showEmpty } from "@/utils/utils"
import { EmptyData, Loading, LoadMore, TabList, OrderGoodsList } from "@/components/index"

export default class Index extends Component {
  state: any
  props: any
  config: Config = {
    backgroundTextStyle: "dark",
    navigationBarTitleText: '我的团队',
  }

  constructor () {
    super(...arguments)
    const { params } = this.$router
    const type = isNaN(Number(params.type)) ? 0 : Number(params.type)
    this.state = {
      page: 1,
      limit: 10,
      loading: true,
      current: type,
      typeKey: type,
      typeList: [
        {title: '我的推广人', val: ''},
        {title: '推广订单', val: 0}
      ],
      dataList: [],
      loadStatus: 'loading',
    }
  }

  componentWillMount() {
    this.getPage()
  }

  //  分页获取数据
  async getPage() {
    const { page, limit, dataList, loadStatus, typeKey } = this.state
    if(loadStatus === 'noMore') {
      return
    }

    let res:any = {}
    if (typeKey === 0) {
      res = await getGisciplePage({ page, limit })
    } else {
      res = await getGiscipleDetailPage({ page, limit })
    }

    const { list, totalCount } = res.data
    this.setState({
      page: page+1,
      loading: false,
      dataList: page === 1 ? list : dataList.concat(list),
      loadStatus: (page * limit >= totalCount) ? 'noMore' : 'loading',
    })
  }

  //  切换tab
  onSwitchTab(key) {
    this.setState({
      page: 1,
      typeKey: key,
      dataList: [],
      loadStatus: 'loading',
    }, () => {
      this.getPage()
    })
  }

  render() {
    const { current, loading, typeKey, typeList, dataList, loadStatus } = this.state
    return (<View className='team-page'>
      {loading && <Loading isCover/>}
      <TabList list={typeList} current={current} className='thin-border__b' onClick={this.onSwitchTab.bind(this)}/>
      {/*<View className='tab-list d-f fy-popup fy-popup--top'>*/}
      {/*  <View className={classNames('tab-item f-g-5', typeKey === 0 && 'active')} onClick={this.onSwitchTab.bind(this, 0)}>我的顾客</View>*/}
      {/*  <View className={classNames('tab-item f-g-5', typeKey === 1 && 'active')} onClick={this.onSwitchTab.bind(this, 1)}>我的合伙人</View>*/}
      {/*</View>*/}
      <ScrollView scrollY className='team-body' onScrollToLower={this.getPage.bind(this)}>
        {typeKey === 0 && !!dataList.length && <View className='user-list'>
          {dataList.map(user => {
            return (<View key={user.id} className='user-info d-f f-d-c'>
              <View className='info-top f-g-4'>
                <Image src={user.headImg} className='user-avatar'/>
                <View className='user-other'>
                  <View className='user-name t-o-e'>{user.nickName}</View>
                  <View className='user-income'>累计贡献：<Text className='bnn-number income-money'>￥{formatAmount(user.contribution)}</Text></View>
                </View>
              </View>
              <View className='info-bottom f-g-4 thin-border__t'>
                <View className='join-time'>加入时间: {formatTime(user.createdAt, 'YYYY年MM月DD日 HH:mm:ss')}</View>
              </View>
            </View>)
          })}
        </View>}
        {typeKey === 1 && !!dataList.length && <View className='order-list'>
          {dataList.map(order => {
            const userSnap = order.userSnap || {}
            const orderInfo = order.orderInfo || {}
            const cartSnap = orderInfo.cartSnap || []
            return (<View key={order.id} className='order-info'>
              <View className='info-head d-f a-i-c j-c-b'>
                <View className='user-info f-g-4'>
                  <Image src={userSnap.headImg} className='user-avatar'/>
                  <View className='user-name t-o-e'>{userSnap.nickName}</View>
                </View>
                <View className='join-time'>{formatTime(order.createdAt, 'YYYY-MM-DD HH:mm')}</View>
              </View>
              <View className='info-body thin-border__t thin-border__b'>
                <OrderGoodsList list={cartSnap}/>
                {/*<View className='goods-list'>*/}
                {/*  {cartSnap.map(i => {*/}
                {/*    return (<View key={i.id} className='goods-item thin-border__b'>*/}
                {/*      <Image src={getThumbnailConfig(headImg(i.images), 320, 320)} className='goods-img' lazyLoad/>*/}
                {/*      <View className='other-box d-f f-d-c j-c-b'>*/}
                {/*        <View className='other-head'>*/}
                {/*          <View className='goods-name t-o-e-2'>{i.name}</View>*/}
                {/*          {i.specSnap && <View className='attr-name t-o-e'>{i.specSnap}</View>}*/}
                {/*        </View>*/}
                {/*        <View className='other-foot d-f a-i-b j-c-b'>*/}
                {/*          <View className='goods-price bnn-number'>*/}
                {/*            <Text className='price-unit'>￥</Text>{formatAmount(i.salePrice)}*/}
                {/*          </View>*/}
                {/*          <View className='goods-num'>x{i.number}</View>*/}
                {/*        </View>*/}
                {/*      </View>*/}
                {/*    </View>)*/}
                {/*  })}*/}
                {/*</View>*/}
              </View>
              <View className='info-foot d-f a-i-c j-c-b'>
                <View className='order-amount d-f a-i-c'>付款金额：<Text className='bnn-number pay-amount'>￥{formatAmount(orderInfo.payAmount)}</Text></View>
                <View className='order-amount d-f a-i-c'>收益：<Text className='bnn-number income-amount'>￥{formatAmount(order.amount)}</Text></View>
              </View>
            </View>)
          })}
        </View>}
        {!showEmpty(dataList, loadStatus) && <LoadMore status={loadStatus}/>}
        {showEmpty(dataList, loadStatus) && <View className='list-empty'><EmptyData type='order'/></View>}
      </ScrollView>
    </View>)
  }
}
